<template>
  <section class="content">
    <!-- Info boxes -->
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua" style="background:linear-gradient(225deg,rgba(190,251,205,1) 0%,rgba(34,198,242,1) 100%); box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06); border-radius:4px;">
          <div class="inner" style="padding: 18px;">
            <h3 style="font-size: 36px"><span style="font-size: 26px;">$</span>{{parseFloat(statistics.yetRecordMoney/1000).toFixed(2)}}k</h3>

            <p style="font-size: 16px">未备案金额</p>

            <h3 style="font-size: 36px; padding: 6px 0px;">{{statistics.yetRecordCount}}</h3>
            <p style="font-size: 16px">未备案订单数</p>
          </div>
          <div style="position:absolute;width:95px;height:157px;bottom:0;right: 0px">
            <i >
              <img src="@/assets/home/home-ba.png" width="96px" height="157px"/>
            </i>
          </div>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6" style=" padding-left: 5px;">
        <!-- small box -->
        <div class="small-box bg-aqua" style="background:linear-gradient(243deg,rgba(251,194,235,1) 0%,rgba(161,140,209,1) 100%); box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06); border-radius:4px;">
          <div class="inner" style="padding: 18px;">
            <h3 style="font-size: 36px"><span style="font-size: 26px;">$</span>{{parseFloat(statistics.yetDeclareMoney/1000).toFixed(2)}}k</h3>

            <p style="font-size: 16px">已备案未预审金额</p>

            <h3 style="font-size: 36px; padding: 6px 0px;">{{statistics.yetDeclareCount}}</h3>
            <p style="font-size: 16px">已备案未预审订单数</p>
          </div>
          <div style="position:absolute;width:95px;height:157px;bottom:0;right: 0px">
            <i >
              <img src="@/assets/home/home-sh.png" width="96px" height="157px"/>
            </i>
          </div>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6" style=" padding-left: 5px;">
        <!-- small box -->
        <div class="small-box bg-aqua" style="background:linear-gradient(135deg,rgba(242,134,160,1) 0%,rgba(252,198,135,1) 100%); box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06); border-radius:4px;">
          <div class="inner" style="padding: 18px;">
            <h3 style="font-size: 36px"><span style="font-size: 26px;">$</span>{{parseFloat(statistics.yetPaymentMoney/1000).toFixed(2)}}k</h3>

            <p style="font-size: 16px">已提交未入账金额</p>

            <h3 style="font-size: 36px; padding: 6px 0px;">{{statistics.yetPaymentCount}}</h3>
            <p style="font-size: 16px">已提交未入账订单数</p>
          </div>
          <div style="position:absolute;width:95px;height:157px;bottom:0;right: 0px">
            <i >
              <img src="@/assets/home/home-tx.png" width="96px" height="157px"/>
            </i>
          </div>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6" style=" padding-left: 5px;">
        <!-- small box -->
        <div class="small-box bg-aqua" style="background:linear-gradient(90deg,rgba(161,196,253,1) 0%,rgba(194,233,251,1) 100%); box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06); border-radius:4px;">
          <div class="inner" style="padding: 18px;">
            <h3 style="font-size: 36px"><span style="font-size: 26px;">$</span>{{parseFloat(statistics.paymentMoney/1000).toFixed(2)}}k</h3>

            <p style="font-size: 16px">已收汇订单金额</p>

            <h3 style="font-size: 36px; padding: 6px 0px;">{{statistics.paymentCount}}</h3>
            <p style="font-size: 16px">已收汇订单数</p>
          </div>
          <div style="position:absolute;width:95px;height:157px;bottom:0;right: 0px">
            <i >
              <img src="@/assets/home/home-sk.png" width="96px" height="157px"/>
            </i>
          </div>
        </div>
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->

    <!--待处理事务-->
    <div class="row">
      <div class="col-sm-8">
        <div class="box box-info" style="border-top: 0px; ">
          <div class="box-header with-border" style="border-left: 3px solid #F56C6C;">
            <h3 class="box-title">待处理事务</h3>

            <div class="box-tools pull-right">
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="table-responsive">
              <table class="table no-margin">
                <tbody>
                <tr>
                  <td class="td-bottom">
                    <img src="@/assets/home/home-sw-1.png" style="width:50px; height:50px; border-radius: 50%;" />
                    最近一次订单同步失败数量
                  </td>
                  <td class="td-bottom td-red">{{statistics.orderPullFailedCount}}</td>
                  <td class="td-bottom">
                    <img src="@/assets/home/home-sw-2.png" style="width:50px; height:50px; border-radius: 50%;" />
                    预审失败
                  </td>
                  <td class="td-bottom td-red">{{statistics.preCheckFailedCount}}</td>
                </tr>
                <tr>
                  <td class="td-bottom">
                    <img src="@/assets/home/home-sw-3.png" style="width:50px; height:50px; border-radius: 50%;" />
                    待匹配报关单
                  </td>
                  <td class="td-bottom td-red">{{statistics.orderYetDeclareCount}}</td>
                  <td class="td-bottom">
                    <img src="@/assets/home/home-sw-4.png" style="width:50px; height:50px; border-radius: 50%;" />
                    收汇失败
                  <td class="td-bottom td-red">{{statistics.paymentFailedCount}}</td>
                </tr>
                <tr>
                  <td class="td-bottom">
                    <img src="@/assets/home/home-sw-5.png" style="width:50px; height:50px; border-radius: 50%;" />
                    备案失败
                  </td>
                  <td class="td-bottom td-red">{{statistics.orderRecordFailedCount}}</td>
                  <td class="td-bottom"></td>
                  <td class="td-bottom td-red"></td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- /.table-responsive -->
          </div>
        </div>
      </div>

      <div class="col-sm-4" style=" padding-left: 5px;">
        <div class="box box-info" style="border-top: 0px; ">
          <div class="box-header with-border" style="border-left: 3px solid #67C23A;">
            <h3 class="box-title">商品总览</h3>

            <div class="box-tools pull-right">
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="table-responsive">
              <table class="table no-margin" style="font-size: 14px">
                <tbody>
                <tr>
                  <td rowspan="3" style="width: 215px; height: 262px; border-top: 0px;">
                    <div id="commodityStatistics" style=" margin-top: 30px;" :style="{width: '213px', height: '232px'}"></div>
                  </td>
                  <td style="border-top: 0px;">
                    <span style="font-size: 30px; color: #606266;"><div style="height: 16px; width: 16px;background: linear-gradient(to top right, #9AE4FF, #D4FFFF); float: left; margin: 14px 20px 0px 0px;border-radius:2px;"></div>{{statistics.goodsCount}}</span><br/>
                    <span style="font-size: 14px; color: #9B9B9B">已录入商品数量</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span style="font-size: 30px; color: #606266;"><div style="height: 16px; width: 16px;background: linear-gradient(to top right, #C0ACED, #FFD4F3); float: left; margin: 14px 20px 0px 0px;border-radius:2px;"></div>{{statistics.goodsNoRelationCount}}</span><br/>
                    <span style="font-size: 14px; color: #9B9B9B">未设定商品关系商品数量</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span style="font-size: 30px; color: #606266;"><div style="height: 16px; width: 16px;background: linear-gradient(to top right, #A1C4FD, #D2F1FE); float: left; margin: 14px 20px 0px 0px;border-radius:2px;"></div>{{statistics.goodsHasRelationCount}}</span><br/>
                    <span style="font-size: 14px; color: #9B9B9B">已对应商品关系商品数量</span>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- /.table-responsive -->
          </div>
        </div>
      </div>
    </div>
    <!--待处理事务END-->


    <!--订单统计-->
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info" style="border-top: 0px; ">
          <div class="box-header with-border" style="border-left: 3px solid #AAE0FF;">
            <h3 class="box-title">收汇</h3>

            <div class="box-tools pull-right">
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="row">
              <div class="col-md-12">

                <div class="chart">
                  <!-- Sales Chart Canvas -->
                  <div id="orderStatistics" :style="{width: '100%', height: '300px'}"></div>
                </div>
                <!-- /.chart-responsive -->
              </div>
            </div>
            <!-- /.row -->
          </div>
          <!-- /.box-footer -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.订单统计END -->


    <div class="row sale-top">
      <!--商品总览-->
      <div class="col-sm-6">
        <div class="box box-info" style="border-top: 0px; ">
          <div class="box-header with-border" style="border-left: 3px solid #409EFF;">
            <h3 class="box-title">商品销售TOP10</h3>

            <div class="box-tools pull-right">
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body no-padding">

            <div class="box-footer">
              <table class="table no-margin" style="font-size: 14px;table-layout: fixed; ">
                <tbody>
                <tr bgcolor="#F1FAFF" style="color: #606266; ">
                  <th style="width: 60px;">NO</th>
                  <th style="width: 200px;">品名</th>
                  <th style="width: 100px;">SKU</th>
                  <th style="width: 60px;">数量</th>
                </tr>
                <tr v-for="(g, index) in goods" :key="index">
                  <td><div :class="`topn${index+1}`">{{index + 1}}</div></td>
                  <td style="text-align: left">{{g.goods}}</td>
                  <td>{{g.sku}}</td>
                  <td>{{g.count}}</td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- /.users-list -->
          </div>
          <!-- /.box-body -->
          <!-- /.box-footer -->
        </div>
      </div>
      <!--商品总览END-->
      <!--用户总览-->
      <div class="col-sm-6" style=" padding-left: 5px;">
        <div class="box box-info" style="border-top: 0px; ">
          <div class="box-header with-border" style="border-left: 3px solid #878989;">
            <h3 class="box-title">客户消费金额TOP10</h3>

            <div class="box-tools pull-right">
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body no-padding">

            <div class="box-footer">
              <table class="table no-margin" style="font-size: 14px;table-layout: fixed; ">
                <tbody>
                <tr bgcolor="#F7F8F9" style="color: #606266; ">
                  <th style="width: 60px;">NO</th>
                  <th style="width: 150px;">姓名</th>
                  <th style="width: 150px;">邮箱</th>
                  <th style="width: 60px;">金额</th>
                </tr>
                <tr v-for="(u, index) in customer" :key="index">
                  <td><div :class="`topn${index+1}`">{{index + 1}}</div></td>
                  <td style="text-align: left">{{u.buyerName}}</td>
                  <td style="text-align: left">{{u.mail}}</td>
                  <td>{{u.money}}</td>
                </tr>
                </tbody>
              </table>
              <!-- /.row -->
            </div>
            <!-- /.users-list -->
          </div>
          <!-- /.box-body -->
          <!-- /.box-footer -->
        </div>
      </div>
      <!--用户总览END-->
    </div>



  </section>
</template>

<script>
  import instance from '@/api/index.js'

  // 引入基本模板
  let echarts = require('echarts')

  export default {
    name: 'systemPage',
    data() {
      return {
        statistics: {"goodsCount": "0",
          "goodsHasRelationCount": "0",
          "goodsNoRelationCount": "0",
          "orderPullFailedCount": "0",
          "orderRecordFailedCount": "0",
          "orderYetDeclareCount": "0",
          "paymentCount": "0",
          "paymentFailedCount": "0",
          "paymentMoney": "0.0",
          "preCheckFailedCount": "0",
          "yetDeclareCount": "0",
          "yetDeclareMoney": "0.0",
          "yetPaymentCount": "0",
          "yetPaymentMoney": "0.0",
          "yetRecordCount": "0",
          "yetRecordMoney": "0.0"},
        payment: [],
          "goods":[],
        customer:[],
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      var _this = this;
      instance({
        method: 'get',
        url: '/v1/statistics/statistics',
      }).then(function (data) {
        if(data.data.success){
          // data.data.data = {}
          if(data.data.data.goodsCount){
            _this.statistics = data.data.data;
          }
          _this.drawLine();
          // _this.statistics.goodsNoRelationCount = 0
          // _this.statistics.goodsCount = 0
          // _this.statistics.goodsHasRelationCount = 0
        }
      }).catch(function (err) {
      });

      instance({
        method: 'get',
        url: '/v1/statistics/payment',
      }).then(function (data) {
        if(data.data.success){
          _this.payment = data.data.data;
          _this.drawLinePayment();
        }
      }).catch(function (err) {
      });

      instance({
        method: 'get',
        url: '/v1/statistics/goods',
      }).then(function (data) {
        if(data.data.success){
          _this.goods = data.data.data;
        }
      }).catch(function (err) {
      });

      instance({
        method: 'get',
        url: '/v1/statistics/customer',
      }).then(function (data) {
        if(data.data.success){
          _this.customer = data.data.data;
        }
      }).catch(function (err) {
      });

      this.$nextTick(function () {
        $('#reservation').daterangepicker();
        $('#salesStatisticsTime').daterangepicker()
      })
    },
    methods: {
      drawLinePayment() {
        var _this = this;
        var payment = _this.payment;
        console.log(payment)
        let xDate = [];
        let yDate = [];
        for(var i=12;i>0; i--){
          var date=new Date;
          date.setMonth( date.getMonth()-i);
          var year=date.getFullYear();
          var month=date.getMonth()+1;
          month =(month<10 ? "0"+month:month);
          xDate[12-i]=year.toString()+"."+month.toString();
          yDate[12-i]=0;
        }
        // for(var i=0; i<payment.length; i++){
        //   xDate[11-i] = payment[i].year + "." + payment[i].month
        //   yDate[11-i] = payment[i].money / 1000
        // }
        var j = 0;
        console.log(payment.length);
        for(var i=payment.length; i>0; i--){
          xDate[i-1] = payment[j].year + "." + payment[j].month
          yDate[i-1] = payment[j].money / 1000
          j ++;
        }
        // console.log('1111111111111111111')
        // payment[0].money = 8123
        // xDate[11] = "2019.03"
        // yDate[11] = (8125.23 / 1000).toFixed(2)
        // console.log('222222222222222222')
        let orderStatistics = echarts.init(document.getElementById('orderStatistics'));
        orderStatistics.setOption({
          color: ['#6DB5FF'],
          tooltip: {
            trigger: 'axis',
            formatter:function(a) {
              return '收汇：' + a[0].data;
            }
          },
          xAxis: {
            type: 'category',
            data:
            xDate
          },
          yAxis: [{
            type : 'value',
            name : '',
            axisLabel : {
              formatter: function(value) {
                return value+"k";
              }
            }
          }],
          series: [
            {
              name: '收汇',
              type: 'bar',
              barWidth: '30px',
              data:  yDate,
              areaStyle: {},
              itemStyle:{
                barBorderRadius: [50, 50, 1, 1]
              }
            }
          ]
        });
      },

      drawLine() {
        var _this = this;
        let commodityStatistics = echarts.init(document.getElementById('commodityStatistics'));

        var total = _this.statistics.goodsCount;
        var countBoole = false;
        if(_this.statistics.goodsNoRelationCount === "0" && _this.statistics.goodsCount === "0" && _this.statistics.goodsHasRelationCount === "0"){
          total = 1
          countBoole = true
        }
        var placeHolderStyle = {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            }
          }
        };
        console.log(_this.statistics.goodsCount);
        console.log(_this.statistics.orderPullFailedCount);
        commodityStatistics.setOption({
          title : {
            text: '',//主标题
            subtext: '',//副标题
            textStyle: {//主标题样式
              color: '#fff',
              fontWeight: 'bold',
              fontSize: 20
            },
            subtextStyle: {//副标题样式
              color: '#fff',
              fontSize: 20,
              fontWeight: 'bold',
              color: '#0f0'
            },
            left:'center',
            top: 'middle'
          },
          tooltip: {
            show: true,
            trigger: 'item',//提示框触发类型，item数据项图形触发，主要应用于无类目轴的图表（散点图、饼形图等）
            formatter: function(params, ticket, callback) {//第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
              if(countBoole) return params.seriesName + ":0 ";//系列名称：数据值
              return params.seriesName + ": " + params.value;//系列名称：数据值
            },
            confine: true
          },
          color:['#dc1439','#e6b600','#053afe'],//调色盘颜色列表，默认情况下图例和饼形环图颜色使用
          legend: {
            top: "44px",
            left: "50%",
            itemHeight: 20,//图例的高度

            itemGap:10,//图例之间的间距        

            data: [],//图例的数据数组
            textStyle: {
              color: '#fff'
            },
            selectedMode: true,//图例选择模式
            orient: "vertical"//图例布局方式
          },
          series: [
            {
              name: '已录入商品数量',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: ['80%', '90%'],
              itemStyle: placeHolderStyle,
              label: {
                normal: {
                  show: false,
                }
              },
              data: [{
                value: _this.statistics.goodsCount,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: '#C5EFFF' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#9AE4FF' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
                  }
                }
              },
                {
                  value: total-_this.statistics.goodsCount,
                  itemStyle: {
                    normal: {
                      color: '#FBFBFB'
                    }
                  }
                }]
            },
            {
              name: '未设定商品关系商品数量',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: ['60%', '70%'],
              itemStyle: placeHolderStyle,
              data: [{
                value: _this.statistics.goodsNoRelationCount,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: '#FFD4F3' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#C0ACED' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
                  }
                }
              },
                {
                  value: total-_this.statistics.goodsNoRelationCount,
                  itemStyle: {
                    normal: {
                      color: '#FBFBFB'
                    }
                  }
                }]
            },
            {
              name: '已对应商品关系商品数量\n',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: ['40%', '50%'],
              itemStyle: placeHolderStyle,
              data: [{
                value: _this.statistics.goodsHasRelationCount,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: '#D2F1FE' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#A1C4FD' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
                  }
                }
              },
                {
                  value: total-_this.statistics.goodsHasRelationCount,
                  itemStyle: {
                    normal: {
                      // color: 'transparent'
                      color: '#FBFBFB'
                    }
                  }
                }]
            }]
        });
      }
    }
  }

</script>

<style scoped>
  td {
    text-align: left;
    font-size: 14px;
  }
  td img {
    margin: 13px 20px 13px 23px;
  }
  tr>td:first-child {
    width: 300px;
  }
  .td-red {
    color: #F56C6C;
    font-size: 24px;
    text-align: right;
    padding-right: 45px;
  }
  .td-bottom{
    border-top: 0px;
    border-bottom: 1px dashed #f4f4f4;
  }

  .sale-top td{
    text-align: center;
  }

  .topn1 {
    width:24px;
    height:24px;
    background:#FECB4F;
    border-radius: 50%;
    margin-left: 25px;
  }
  .topn2 {
    width:24px;
    height:24px;
    background:#EEEEEE;
    border-radius: 50%;
    margin-left: 25px;
  }
  .topn3 {
    width:24px;
    height:24px;
    background:#F6AA73;
    border-radius: 50%;
    margin-left: 25px;
  }
  .topn4,.topn5,.topn6,.topn7,.topn8,.topn9,.topn10 {
    width:24px;
    height:24px;
    border-radius: 50%;
    margin-left: 25px;
  }

</style>
